<template>
  <div class="app">
    <!-- 给组件写了一个props里没定义的属性就叫非props属性 -->
    <base-box class="login-box" style="background-color: #f0f2f5">
      <template #title>
        
        <!-- 用来做切换的 -->
        <base-tabs
          v-model="active"
          :tabs="[
            { value: 'DemoPwd', text: '密码登录' },
            { value: 'DemoPhone', text: '手机号注册' },
            { value: 'DemoQrCode', text: '二维码登录' },
          ]"
        />
      </template>

      <!-- 默认插槽 -->
      <template>
        <keep-alive include="DemoPwd">
          <component :is="active" />
        </keep-alive>
      </template>
    </base-box>
  </div>
</template>

<script>

// 导入三个组件
import DemoPwd from './components/DemoPwd.vue'
import DemoPhone from './components/DemoPhone.vue'
import DemoQrCode from './components/DemoQrCode.vue'

export default {
  components: {
    DemoPwd,
    DemoPhone,
    DemoQrCode
  },

  data() {
    return {
      // 控制tabs
      active: "DemoPwd",
    };
  },
};
</script>


<style lang="less" scoped>
// 加完scoped后，它只会当前组件里写过的标签有data-v-hash值，没写的就没有

li:hover {

  background-color: #f00;
}

.login-box {
  width: 450px;
  margin: 50px auto;

  .inp-box {
    text-align: center;

    label {
      width: 80px;
      display: inline-block;
      text-align: right;
    }
  }
}
</style>
